<template>
  <div class="flex items-center justify-center gap-x-3">
    <IconPark class="icon-hover" :icon="showLoopType" :size="20" :stroke-width="3" @click="toggleLoop"></IconPark>
    <IconPark class="icon-hover" :icon="GoStart" :size="28" theme="filled" @click="togglePrev"></IconPark>
    <IconPark
      class="icon-hover text-emerald-400"
      :icon="showPlay"
      :size="45"
      theme="filled"
      @click="togglePlay"
    ></IconPark>
    <IconPark class="icon-hover" :icon="GoEnd" :size="28" theme="filled" @click="toggleNext"></IconPark>
    <el-popover placement="top" width="50px">
      <template #reference>
        <IconPark :icon="VolumeSmall" size="20" :stroke-width="3" class="icon-hover" />
      </template>
      <PlayerVolume />
    </el-popover>
  </div>
</template>

<script lang="ts" setup>
import { Play, PauseOne, LoopOnce, ShuffleOne, PlayOnce, GoEnd, GoStart, VolumeSmall } from '@icon-park/vue-next'
import type { Icon } from '@icon-park/vue-next/lib/runtime'
import IconPark from '@/components/icon-park/IconPark.vue'
import PlayerVolume from './PlayerVolume.vue'
import { toRefs, computed, reactive, markRaw } from 'vue'
import { usePlayerStore } from '@/stores/player'

// interface or type with tool-function getValueByObjKey
interface numberKeyIcon {
  [key: number]: Icon
}
type numberKey = Record<number, Icon>
type stringKey = Record<string, Icon>

const { loopType, toggleLoop, togglePrev, status, togglePlay, toggleNext } = toRefs(usePlayerStore())
const loopTypeRef = reactive<numberKey>({
  0: markRaw(PlayOnce),
  1: markRaw(LoopOnce),
  2: markRaw(ShuffleOne),
})
const playRef = reactive<stringKey>({
  playing: markRaw(PauseOne),
  pause: markRaw(Play),
})

const getValueByObjKey = function <T extends object, K extends keyof T>(obj: T, key: K) {
  return obj[key]
}

const showLoopType = computed(() => getValueByObjKey(loopTypeRef, loopType.value))
const showPlay = computed(() => getValueByObjKey(playRef, status.value))
// const showLoopType = computed(() => loopTypeRef[loopType.value])
// const showLoopType = computed(() => loopTypeRef[loopType.value as unknown as keyof typeof loopTypeRef])
</script>

<style lang="less" scoped></style>
